<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script>
            // https://21ido.com/2018/05/30381c3b/
            // var heartCheck = {
            //     timer: 0,
            //     _obj: null,
            //     _callback: null,
            //     init: function (wsObj, callback) {
            //         console.log('init');
            //         this._obj = wsObj;
            //         callback && (this._callback = callback);
            //         this.sayHi();
            //     },
            //     sayHi: function () {
            //         clearTimeout(this.timer);
            //         this.timer = setTimeout(() => {
            //             this.onError();
            //         }, 10000);
            //         this._obj.send('hi,' + this.timer);
            //         console.log('sayHi:' + this.timer);
            //     },
            //     clear: function (flag) {
            //         console.log('clear:' + this.timer);
            //         clearTimeout(this.timer);
            //         if (true === flag) {
            //             console.log('heartCheck finished');
            //             return;
            //         }
            //         setTimeout(() => {
            //             this.sayHi();
            //         }, 3000);
            //     },
            //     onError: function () {
            //         console.log('onError:', this.timer);
            //         clearTimeout(this.timer);
            //         this._callback && this._callback();
            //     },
            // };
            // //let hc = new heartCheck();
            // let uri = 'ws://localhost:8080';
            // var ws = new WebSocket(uri);
            // ws.onopen = (event) => {
            //     console.log('ws onopen', event);
            //     ws.send('from client: hello');
            //     heartCheck.init(ws);
            // };
            // ws.onmessage = (event) => {
            //     console.log('ws onmessage');
            //     console.log('from server: ', event);
            //     showLog(event.data);
            //     heartCheck.clear();
            // };
            // ws.onclose = (event) => {
            //     console.log('ws close', event);
            //     console.log(ws);
            //     heartCheck.clear(true);
            // };
            // ws.onerror = (event) => {
            //     console.log('ws error', event);
            //     console.log(ws);
            // };

            var heartCheck = {
                timer: 0,
                _obj: null,
                _callback: null,
                _time: 10000, //心跳间隔10秒
                init: function (wsObj, callback) {
                    console.log('init');
                    this._obj = wsObj;
                    callback && (this._callback = callback);
                    this.sayHi();
                },
                sayHi: function () {
                    clearTimeout(this.timer);
                    this.timer = setTimeout(() => {
                        if (1 == this._obj.readyState) {
                            this._obj.send('check : ' + this.timer);
                        }
                    }, this._time);
                    console.log('sayHi:' + this.timer);
                },
                clear: function (flag) {
                    console.log('clear:' + this.timer);
                    clearTimeout(this.timer);
                },
                onError: function () {
                    console.log('onError:', this.timer);
                    this.clear();
                    this._callback && this._callback();
                },
            };

            let uri = 'ws://localhost:8080';
            var ws = new WebSocket(uri);
            ws.onopen = (event) => {
                console.log('ws onopen', event);
                showLog('go~');
                MsgBegin && MsgBegin();
                heartCheck.init(ws, () => {
                    console.log('reconnect...');
                    ws = new WebSocket(uri);
                });
            };
            ws.onmessage = (event) => {
                console.log('ws onmessage1', event, ws.readyState);
                showLog(event.data);
                heartCheck.sayHi();
            };
            ws.onclose = (event) => {
                console.log('ws close', event, ws);
                heartCheck.clear();
            };
            ws.onerror = (event) => {
                console.log('ws error', event, ws);
                heartCheck.onError();
            };
            let MsgBegin = () => {
                let n = Math.random() * 100000;
                setTimeout(() => {
                    if (1 == ws.readyState) {
                        ws.send('send:' + n);
                    }
                    MsgBegin();
                }, n);
            };
        </script>
    </body>
</html>
